
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>YUI Library Examples: Event: Simple DOM Events</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    	<link rel="stylesheet" type="text/css" href="../../assets/yui.css" >

<style>
    /*Supplemental CSS for the YUI distribution*/
    #custom-doc { width: 95%; min-width: 950px; }
    #pagetitle {background-image: url(../../assets/bg_hd.gif);}
/*    #pagetitle h1 {background-image: url(../../assets/title_h_bg.gif);}*/
</style>

<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">
<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
<script type="text/javascript" src="../../build/yui/yui-min.js"></script>
<style type="text/css">
#container {
    background-color: #00CCFF;
    border: 1px dotted black;
    padding: 1em;
    cursor: pointer;
}
#example-canvas #demo a {
    color: #00c;
    text-decoration: underline;
}
</style>

</head>
<body id="yahoo-com" class="yui3-skin-sam  yui-skin-sam">
<div id="custom-doc" class="yui-t2">
<div id="hd">
	<div id="ygunav">
		<p>
            <em>
                <a href="http://developer.yahoo.com/yui/3/">YUI 3.x Home</a> <i> - </i>	
            </em>
		</p>
		<form action="http://search.yahoo.com/search" id="sitesearchform">
            <input name="vs" type="hidden" value="developer.yahoo.com">
            <input name="vs" type="hidden" value="yuiblog.com">
			<input name="vs" type="hidden" value="yuilibrary.com">
		    <div id="sitesearch">
		    	<label for="searchinput">Site Search (YDN, YUILibrary &amp; YUIBlog): </label>
			    <input type="text" id="searchinput" name="p">
			    <input type="submit" value="Search" id="searchsubmit" class="ygbt">
		    </div>
		</form>
    </div>
	<div id="ygma"><a href="../../"><img src="../../assets/logo.gif"  border="0" width="200" height="93"></a></div>
	<div id="pagetitle"><h1>YUI Library Examples: Event: Simple DOM Events</h1></div>
</div>
<div id="bd">


	<div id="yui-main">
		<div class="yui-b">
		  <div class="yui-ge">
			  <div class="yui-u first example" id="main">

	<h2>Event: Simple DOM Events</h2>

	<div id="example" class="promo">
	<div class="example-intro">
	<p>Clicking in the blue box will pop up a "Hello World!" alert window.  Clicking on the first link will take you to the YUI website; clicking on the second link, which has the same <code>href</code> attribute, will pop up an alert instead and not navigate to a new page.</p>

<p>Event Utility is used here to do two things:</p>

<ol>
	<li>Attach the <code>click</code> event handler to the blue box;</li>
	<li>Attach an event handler to the second <code>&lt;a&gt;</code> element that uses <code>preventDefault()</code> to prevent the link, when clicked, from navigating to a new page. </li>

</ol>	</div>

	<div class="module example-container ">
			<div class="hd exampleHd">
			<p class="newWindowButton yui-skin-sam">
                <a href="event-simple_clean.html" target="_blank">View example in new window.</a>
            </p>
		</div>		<div id="example-canvas" class="bd">

	
	<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->

	<script>
YUI({ filter: 'raw' }).use("node",
function(Y) {
        
    //A function that pops up a "Hello World" alert:
    var helloWorld = function(e) {
        Y.log("helloWorld function firing.", "info", "example");
        alert("Hello World!");
    }

    //subscribe the helloWorld function as an event
    //handler for the click event on the container
    //div:
    Y.on("click", helloWorld, "#container");

    //A function that pops up an alert and
    //prevents the default behavior of the event
    //for which it is a handler:
    var interceptLink = function(e) {
        e.preventDefault();
        Y.log("You clicked on the second YUI link.", "info", "example");
        alert("You clicked on the second YUI link.  Because *preventDefault* was called, this link will not navigate away from the page.");
    }

    //subscribe our interceptLink function
    //as a click handler for the second anchor
    //element:
    Y.on("click", interceptLink, "#secondA");

    //log message to indicate that the example is ready:
    Y.log("When you begin interacting with the example at left, you'll see log messages appear here.", "info", "example");
});

</script>

<div id="demo">
    <div id="container">
        <p>Click for Hello World alert.</p>
    </div>
    <p><a href="http://developer.yahoo.com/yui" id="firstA">The YUI Library. (Link navigates away from page.)</a></p>

    <p><a href="http://developer.yahoo.com/yui" id="secondA">The YUI Library. (Link's default behavior is suppressed.)</a></p>
</div>

	<!--END SOURCE CODE FOR EXAMPLE =============================== -->

	
		</div>
	</div>
	</div>

	<h2 class="first">Reacting to the <code>click</code> event</h2>

<p>To illustrate event handling syntax, we'll create a <code>&lt;div&gt;</code> and pop up an alert message when that <code>&lt;div&gt;</code> is clicked.</p>

<div id="syntax-e89ad06b92f9420521d818ca92ac261b" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="co1">// Create a YUI instance and load the 'node' module</span></div></li><li class="li1"><div class="de1">YUI<span class="br0">&#40;</span><span class="br0">&#123;</span> filter<span class="sy0">:</span> <span class="st0">'raw'</span> <span class="br0">&#125;</span><span class="br0">&#41;</span>.<span class="kw2">use</span><span class="br0">&#40;</span><span class="st0">&quot;node&quot;</span><span class="sy0">,</span> <span class="kw2">function</span> <span class="br0">&#40;</span>Y<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">    <span class="co1">// A function that pops up a &quot;Hello World&quot; alert:</span></div></li><li class="li2"><div class="de2">    <span class="kw2">var</span> helloWorld <span class="sy0">=</span> <span class="kw2">function</span> <span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">        <span class="kw3">alert</span><span class="br0">&#40;</span><span class="st0">&quot;Hello World!&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">    ...</div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="co1">// Create a YUI instance and load the 'node' module</span>
YUI<span class="br0">&#40;</span><span class="br0">&#123;</span> filter<span class="sy0">:</span> <span class="st0">'raw'</span> <span class="br0">&#125;</span><span class="br0">&#41;</span>.<span class="kw2">use</span><span class="br0">&#40;</span><span class="st0">&quot;node&quot;</span><span class="sy0">,</span> <span class="kw2">function</span> <span class="br0">&#40;</span>Y<span class="br0">&#41;</span> <span class="br0">&#123;</span>
&nbsp;
    <span class="co1">// A function that pops up a &quot;Hello World&quot; alert:</span>
    <span class="kw2">var</span> helloWorld <span class="sy0">=</span> <span class="kw2">function</span> <span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span>
        <span class="kw3">alert</span><span class="br0">&#40;</span><span class="st0">&quot;Hello World!&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span>
    <span class="br0">&#125;</span><span class="sy0">;</span>
&nbsp;
    ...</pre></div><textarea id="syntax-e89ad06b92f9420521d818ca92ac261b-plain">// Create a YUI instance and load the 'node' module
YUI({ filter: 'raw' }).use("node", function (Y) {

    // A function that pops up a "Hello World" alert:
    var helloWorld = function (e) {
        alert("Hello World!");
    };

    ...</textarea></div>
<p>We now use the Event Utility's <code>on</code> method to attach our <code>helloWorld</code> function as a handler for the <code>click</code> event on the element whose HTML ID is <code>container</code>.  <code>on</code> is available for convenience at the top-level of a YUI instance; as a result, it can be referenced as <code>Y.on</code> where Y is a YUI instance:</p>

<div id="syntax-ed4d6f72991322325d75b36e76cd2b9c" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="co1">// Point to the container div with the CSS selector</span></div></li><li class="li1"><div class="de1">Y.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">&quot;click&quot;</span><span class="sy0">,</span> helloWorld<span class="sy0">,</span> <span class="st0">&quot;#container&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="co1">// Point to the container div with the CSS selector</span>
Y.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">&quot;click&quot;</span><span class="sy0">,</span> helloWorld<span class="sy0">,</span> <span class="st0">&quot;#container&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span></pre></div><textarea id="syntax-ed4d6f72991322325d75b36e76cd2b9c-plain">// Point to the container div with the CSS selector
Y.on("click", helloWorld, "#container");</textarea></div>
<p>Almost all event handling begins with a premise just this simple: we have an element to which something might happen (eg, it might be clicked) and, when that <em>does</em> happen, we want to do something (eg, <code>helloWorld</code>).</p>

<h2 id="prevent">Preventing event behavior</h2>

<p>In some cases, you may want to use some of Event Utility's powerful browser abstraction methods to help you handle your interaction flow during an event.  For example, let's say you have two links on the page:</p>

<div id="syntax-987232082b5ce7e5f773f8bbc9daf4cf" class="yui-syntax-highlight"><div class="numbers"><pre class="html4strict" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="sc2">&lt;<span class="kw2">p</span>&gt;&lt;<span class="kw2">a</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">&quot;http://developer.yahoo.com/yui&quot;</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;firstA&quot;</span>&gt;</span>The YUI Library. (Link navigates away from page.)<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">a</span>&gt;&lt;<span class="sy0">/</span><span class="kw2">p</span>&gt;</span></div></li><li class="li1"><div class="de1"><span class="sc2">&lt;<span class="kw2">p</span>&gt;&lt;<span class="kw2">a</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">&quot;http://developer.yahoo.com/yui&quot;</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;secondA&quot;</span>&gt;</span>The YUI Library. (Link's default behavior is suppressed.)<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">a</span>&gt;&lt;<span class="sy0">/</span><span class="kw2">p</span>&gt;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="html4strict" style="font-family:monospace;"><span class="sc2">&lt;<span class="kw2">p</span>&gt;&lt;<span class="kw2">a</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">&quot;http://developer.yahoo.com/yui&quot;</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;firstA&quot;</span>&gt;</span>The YUI Library. (Link navigates away from page.)<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">a</span>&gt;&lt;<span class="sy0">/</span><span class="kw2">p</span>&gt;</span>
<span class="sc2">&lt;<span class="kw2">p</span>&gt;&lt;<span class="kw2">a</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">&quot;http://developer.yahoo.com/yui&quot;</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;secondA&quot;</span>&gt;</span>The YUI Library. (Link's default behavior is suppressed.)<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">a</span>&gt;&lt;<span class="sy0">/</span><span class="kw2">p</span>&gt;</span></pre></div><textarea id="syntax-987232082b5ce7e5f773f8bbc9daf4cf-plain"><p><a href="http://developer.yahoo.com/yui" id="firstA">The YUI Library. (Link navigates away from page.)</a></p>
<p><a href="http://developer.yahoo.com/yui" id="secondA">The YUI Library. (Link's default behavior is suppressed.)</a></p></textarea></div>
<p>Let's say that when the second link is clicked, instead of navigating away from the current page, you want to pop up an alert window.  The event object passed to your event handler is a facade &mdash; not the actual browser event object.  This facade supports the <code>preventDefault</code> method for cancelling inherent browser behavior such as anchor links loading a new page.</p>

<div id="syntax-dff502ad12ee3cf406c9a700f3a4c4e8" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="co1">// A function that stops the browser from navigating away</span></div></li><li class="li1"><div class="de1"><span class="co1">// from the page, and instead pops up an alert.</span></div></li><li class="li1"><div class="de1"><span class="kw2">var</span> interceptLink <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    e.<span class="me1">preventDefault</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">    Y.<span class="me1">log</span><span class="br0">&#40;</span><span class="st0">&quot;You clicked on the second YUI link.&quot;</span><span class="sy0">,</span> <span class="st0">&quot;info&quot;</span><span class="sy0">,</span> <span class="st0">&quot;example&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="kw3">alert</span><span class="br0">&#40;</span><span class="st0">&quot;You clicked on the second YUI link.  Because *preventDefault* was called, this link will not navigate away from the page.&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1"><span class="co1">// subscribe our interceptLink function to the second anchor</span></div></li><li class="li2"><div class="de2">Y.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">&quot;click&quot;</span><span class="sy0">,</span> interceptLink<span class="sy0">,</span> <span class="st0">&quot;#secondA&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="co1">// A function that stops the browser from navigating away</span>
<span class="co1">// from the page, and instead pops up an alert.</span>
<span class="kw2">var</span> interceptLink <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span>
    e.<span class="me1">preventDefault</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span>
    Y.<span class="me1">log</span><span class="br0">&#40;</span><span class="st0">&quot;You clicked on the second YUI link.&quot;</span><span class="sy0">,</span> <span class="st0">&quot;info&quot;</span><span class="sy0">,</span> <span class="st0">&quot;example&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span>
    <span class="kw3">alert</span><span class="br0">&#40;</span><span class="st0">&quot;You clicked on the second YUI link.  Because *preventDefault* was called, this link will not navigate away from the page.&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span>
<span class="br0">&#125;</span>
&nbsp;
<span class="co1">// subscribe our interceptLink function to the second anchor</span>
Y.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">&quot;click&quot;</span><span class="sy0">,</span> interceptLink<span class="sy0">,</span> <span class="st0">&quot;#secondA&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span></pre></div><textarea id="syntax-dff502ad12ee3cf406c9a700f3a4c4e8-plain">// A function that stops the browser from navigating away
// from the page, and instead pops up an alert.
var interceptLink = function(e) {
    e.preventDefault();
    Y.log("You clicked on the second YUI link.", "info", "example");
    alert("You clicked on the second YUI link.  Because *preventDefault* was called, this link will not navigate away from the page.");
}

// subscribe our interceptLink function to the second anchor
Y.on("click", interceptLink, "#secondA");</textarea></div>
<h2 id="fullcode">Full Code Listing</h2>
<h3>Markup</h3>
<div id="syntax-8a1d856bbac9cbb5796b87aca20282d2" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="sy0">&lt;</span>div id<span class="sy0">=</span><span class="st0">&quot;container&quot;</span><span class="sy0">&gt;</span></div></li><li class="li1"><div class="de1">    <span class="sy0">&lt;</span>p<span class="sy0">&gt;</span>Click <span class="kw1">for</span> Hello World <span class="kw3">alert</span>.<span class="sy0">&lt;/</span>p<span class="sy0">&gt;</span></div></li><li class="li1"><div class="de1"><span class="sy0">&lt;/</span>div<span class="sy0">&gt;</span></div></li><li class="li1"><div class="de1"><span class="sy0">&lt;</span>p<span class="sy0">&gt;&lt;</span>a href<span class="sy0">=</span><span class="st0">&quot;http://developer.yahoo.com/yui&quot;</span> id<span class="sy0">=</span><span class="st0">&quot;firstA&quot;</span><span class="sy0">&gt;</span>The YUI Library. <span class="br0">&#40;</span>Link navigates away from page.<span class="br0">&#41;</span><span class="sy0">&lt;/</span>a<span class="sy0">&gt;&lt;/</span>p<span class="sy0">&gt;</span></div></li><li class="li2"><div class="de2">&nbsp;</div></li><li class="li1"><div class="de1"><span class="sy0">&lt;</span>p<span class="sy0">&gt;&lt;</span>a href<span class="sy0">=</span><span class="st0">&quot;http://developer.yahoo.com/yui&quot;</span> id<span class="sy0">=</span><span class="st0">&quot;secondA&quot;</span><span class="sy0">&gt;</span>The YUI Library. <span class="br0">&#40;</span>Link<span class="st0">'s default behavior is suppressed.)&lt;/a&gt;&lt;/p&gt;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="sy0">&lt;</span>div id<span class="sy0">=</span><span class="st0">&quot;container&quot;</span><span class="sy0">&gt;</span>
    <span class="sy0">&lt;</span>p<span class="sy0">&gt;</span>Click <span class="kw1">for</span> Hello World <span class="kw3">alert</span>.<span class="sy0">&lt;/</span>p<span class="sy0">&gt;</span>
<span class="sy0">&lt;/</span>div<span class="sy0">&gt;</span>
<span class="sy0">&lt;</span>p<span class="sy0">&gt;&lt;</span>a href<span class="sy0">=</span><span class="st0">&quot;http://developer.yahoo.com/yui&quot;</span> id<span class="sy0">=</span><span class="st0">&quot;firstA&quot;</span><span class="sy0">&gt;</span>The YUI Library. <span class="br0">&#40;</span>Link navigates away from page.<span class="br0">&#41;</span><span class="sy0">&lt;/</span>a<span class="sy0">&gt;&lt;/</span>p<span class="sy0">&gt;</span>
&nbsp;
<span class="sy0">&lt;</span>p<span class="sy0">&gt;&lt;</span>a href<span class="sy0">=</span><span class="st0">&quot;http://developer.yahoo.com/yui&quot;</span> id<span class="sy0">=</span><span class="st0">&quot;secondA&quot;</span><span class="sy0">&gt;</span>The YUI Library. <span class="br0">&#40;</span>Link<span class="st0">'s default behavior is suppressed.)&lt;/a&gt;&lt;/p&gt;</span></pre></div><textarea id="syntax-8a1d856bbac9cbb5796b87aca20282d2-plain"><div id="container">
    <p>Click for Hello World alert.</p>
</div>
<p><a href="http://developer.yahoo.com/yui" id="firstA">The YUI Library. (Link navigates away from page.)</a></p>

<p><a href="http://developer.yahoo.com/yui" id="secondA">The YUI Library. (Link's default behavior is suppressed.)</a></p></textarea></div>
<h3 id="js">JavaScript</h3>
<div id="syntax-7179ecd568c6479a924c83b52d065c0e" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="co1">// Create a YUI instance and load the 'node' module</span></div></li><li class="li1"><div class="de1">YUI<span class="br0">&#40;</span><span class="br0">&#123;</span> filter<span class="sy0">:</span> <span class="st0">'raw'</span> <span class="br0">&#125;</span><span class="br0">&#41;</span>.<span class="kw2">use</span><span class="br0">&#40;</span><span class="st0">&quot;node&quot;</span><span class="sy0">,</span> <span class="kw2">function</span> <span class="br0">&#40;</span>Y<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">    <span class="co1">// A function that pops up a &quot;Hello World&quot; alert:</span></div></li><li class="li2"><div class="de2">    <span class="kw2">var</span> helloWorld <span class="sy0">=</span> <span class="kw2">function</span> <span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">        <span class="kw3">alert</span><span class="br0">&#40;</span><span class="st0">&quot;Hello World!&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">    <span class="co1">// Point to the container div with the CSS selector</span></div></li><li class="li2"><div class="de2">    Y.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">&quot;click&quot;</span><span class="sy0">,</span> helloWorld<span class="sy0">,</span> <span class="st0">&quot;#container&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">    <span class="co1">// A function that stops the browser from navigating away</span></div></li><li class="li1"><div class="de1">    <span class="co1">// from the page, and instead pops up an alert.</span></div></li><li class="li1"><div class="de1">    <span class="kw2">var</span> interceptLink <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li2"><div class="de2">        e.<span class="me1">preventDefault</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">        Y.<span class="me1">log</span><span class="br0">&#40;</span><span class="st0">&quot;You clicked on the second YUI link.&quot;</span><span class="sy0">,</span> <span class="st0">&quot;info&quot;</span><span class="sy0">,</span> <span class="st0">&quot;example&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">        <span class="kw3">alert</span><span class="br0">&#40;</span><span class="st0">&quot;You clicked on the second YUI link.  Because *preventDefault* was called, this link will not navigate away from the page.&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li2"><div class="de2">    <span class="co1">// subscribe our interceptLink function to the second anchor</span></div></li><li class="li1"><div class="de1">    Y.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">&quot;click&quot;</span><span class="sy0">,</span> interceptLink<span class="sy0">,</span> <span class="st0">&quot;#secondA&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="co1">// Create a YUI instance and load the 'node' module</span>
YUI<span class="br0">&#40;</span><span class="br0">&#123;</span> filter<span class="sy0">:</span> <span class="st0">'raw'</span> <span class="br0">&#125;</span><span class="br0">&#41;</span>.<span class="kw2">use</span><span class="br0">&#40;</span><span class="st0">&quot;node&quot;</span><span class="sy0">,</span> <span class="kw2">function</span> <span class="br0">&#40;</span>Y<span class="br0">&#41;</span> <span class="br0">&#123;</span>
&nbsp;
    <span class="co1">// A function that pops up a &quot;Hello World&quot; alert:</span>
    <span class="kw2">var</span> helloWorld <span class="sy0">=</span> <span class="kw2">function</span> <span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span>
        <span class="kw3">alert</span><span class="br0">&#40;</span><span class="st0">&quot;Hello World!&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span>
    <span class="br0">&#125;</span><span class="sy0">;</span>
&nbsp;
    <span class="co1">// Point to the container div with the CSS selector</span>
    Y.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">&quot;click&quot;</span><span class="sy0">,</span> helloWorld<span class="sy0">,</span> <span class="st0">&quot;#container&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
    <span class="co1">// A function that stops the browser from navigating away</span>
    <span class="co1">// from the page, and instead pops up an alert.</span>
    <span class="kw2">var</span> interceptLink <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span>
        e.<span class="me1">preventDefault</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span>
        Y.<span class="me1">log</span><span class="br0">&#40;</span><span class="st0">&quot;You clicked on the second YUI link.&quot;</span><span class="sy0">,</span> <span class="st0">&quot;info&quot;</span><span class="sy0">,</span> <span class="st0">&quot;example&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span>
        <span class="kw3">alert</span><span class="br0">&#40;</span><span class="st0">&quot;You clicked on the second YUI link.  Because *preventDefault* was called, this link will not navigate away from the page.&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span>
    <span class="br0">&#125;</span>
&nbsp;
    <span class="co1">// subscribe our interceptLink function to the second anchor</span>
    Y.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">&quot;click&quot;</span><span class="sy0">,</span> interceptLink<span class="sy0">,</span> <span class="st0">&quot;#secondA&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span>
<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></pre></div><textarea id="syntax-7179ecd568c6479a924c83b52d065c0e-plain">// Create a YUI instance and load the 'node' module
YUI({ filter: 'raw' }).use("node", function (Y) {

    // A function that pops up a "Hello World" alert:
    var helloWorld = function (e) {
        alert("Hello World!");
    };

    // Point to the container div with the CSS selector
    Y.on("click", helloWorld, "#container");

    // A function that stops the browser from navigating away
    // from the page, and instead pops up an alert.
    var interceptLink = function(e) {
        e.preventDefault();
        Y.log("You clicked on the second YUI link.", "info", "example");
        alert("You clicked on the second YUI link.  Because *preventDefault* was called, this link will not navigate away from the page.");
    }

    // subscribe our interceptLink function to the second anchor
    Y.on("click", interceptLink, "#secondA");
});</textarea></div>				</div>
				<div class="yui-u sidebar">
	
					<div id="examples" class="mod box4">
                        <div class="hd">
						<h4>
    Event Examples:</h4>
                        </div>
						<div class="bd">
							<ul>
								<li class='selected'><a href='../event/event-simple.html'>Simple DOM Events</a></li><li><a href='../event/event-timing.html'>Using 'available', 'contentready', and 'domready'</a></li><li><a href='../event/event-ce.html'>Using Custom Events</a></li><li><a href='../event/event-focus-blur.html'>Skinning via Progressive Enhancement using the Event Utility and the Loader</a></li><li><a href='../event/event-synth-arrow.html'>Creating an Arrow Event for DOM Subscription</a></li><li><a href='../event/swipe-gesture.html'>Supporting A Swipe Left Gesture</a></li><li><a href='../yui/yui-augment.html'>Compose Classes of Objects with <code>augment</code> (included with examples for The YUI Global Object)</a></li><li><a href='../node-focusmanager/node-focusmanager-3.html'>Accessible Menu Button (included with examples for Focus Manager Node Plugin)</a></li><li><a href='../node-focusmanager/node-focusmanager-2.html'>Accessible TabView (included with examples for Focus Manager Node Plugin)</a></li><li><a href='../attribute/attribute-event.html'>Attribute Change Events (included with examples for Attribute)</a></li><li><a href='../attribute/attribute-event-speeddate.html'>Attribute Event Based Speed Dating (included with examples for Attribute)</a></li><li><a href='../attribute/attribute-getset.html'>Attribute Getters, Setters and Validators (included with examples for Attribute)</a></li><li><a href='../widget/widget-extend.html'>Extending the Base Widget Class (included with examples for Widget)</a></li><li><a href='../dd/photo-browser.html'>Photo Browser (included with examples for Drag &amp; Drop)</a></li>							</ul>
						</div>
					</div>

					<div class="mod box4">
                        <div class="hd">
						<h4>More Event Resources:</h4>
                        </div>
                        <div class="bd">
						<ul>
							<!-- <li><a href="http://developer.yahoo.com/yui/event/">User's Guide</a> (external)</li> -->
<li><a href="../../api/module_event.html">API Documentation</a></li></ul>
                        </div>
					</div>
			  </div>
		</div>

		</div>
	</div>


<div class="yui-b toc3" id="tocWrapper">
<!-- TABLE OF CONTENTS -->
<div id="toc">
	
<ul>
<li class="sect first">YUI 3 Resources</li><li class="item"><a title="YUI 3 -- Yahoo! User Interface (YUI) Library" href="http://developer.yahoo.com/yui/3/">YUI 3 Web Site</a></li><li class="item"><a title="Examples of every YUI utility and control in action" href="../../examples/">YUI 3 Examples</a></li><li class="item"><a title="Instantly searchable API documentation for the entire YUI library." href="../../api/">YUI 3 API Docs</a></li><li class="item"><a title="YUI 3 Dependency Configurator -- configure your custom YUI implementation" href="http://developer.yahoo.com/yui/3/configurator/index.html">YUI 3 Dependency Configurator</a></li><li class="item"><a title="The YUI 3 Forum on YUILibrary.com" href="http://yuilibrary.com/forum/viewforum.php?f=15">YUI 3 Forums (external)</a></li><li class="item"><a title="Found a bug or a missing feature? Let us know on YUILibrary.com." href="http://developer.yahoo.com/yui/articles/reportingbugs/">Bug Reports/Feature Requests</a></li><li class="item"><a title="YUI is free and open, offered under a BSD license." href="http://developer.yahoo.com/yui/license.html">YUI License</a></li><li class="item"><a title="Download and fork the YUI project on GitHub" href="http://github.com/yui">YUI on Github</a></li><li class="item"><a title="The Yahoo! User Interface Blog" href="http://yuiblog.com">YUI Blog (external)</a></li><li class="sect">YUI 3 Core - Examples</li><li class="item"><a title="YUI Global Object - Functional Examples" href="../../examples/yui/index.html">YUI Global Object</a></li><li class="selected "><a title="Event - Functional Examples" href="../../examples/event/index.html">Event</a></li><li class="item"><a title="Node - Functional Examples" href="../../examples/node/index.html">Node</a></li><li class="sect">YUI 3 Component Infrastructure - Examples</li><li class="item"><a title="Attribute - Functional Examples" href="../../examples/attribute/index.html">Attribute</a></li><li class="item"><a title="Plugin - Functional Examples" href="../../examples/plugin/index.html">Plugin</a></li><li class="item"><a title="Widget - Functional Examples" href="../../examples/widget/index.html">Widget</a></li><li class="sect">YUI 3 Utilities - Examples</li><li class="item"><a title="Animation - Functional Examples" href="../../examples/anim/index.html">Animation</a></li><li class="item"><a title="AsyncQueue - Functional Examples" href="../../examples/async-queue/index.html">AsyncQueue</a></li><li class="item"><a title="Cache - Functional Examples" href="../../examples/cache/index.html">Cache</a></li><li class="item"><a title="Cookie - Functional Examples" href="../../examples/cookie/index.html">Cookie</a></li><li class="item"><a title="DataSchema - Functional Examples" href="../../examples/dataschema/index.html">DataSchema <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataSource - Functional Examples" href="../../examples/datasource/index.html">DataSource <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataType - Functional Examples" href="../../examples/datatype/index.html">DataType <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Drag &amp; Drop - Functional Examples" href="../../examples/dd/index.html">Drag &amp; Drop</a></li><li class="item"><a title="Get - Functional Examples" href="../../examples/get/index.html">Get</a></li><li class="item"><a title="History - Functional Examples" href="../../examples/history/index.html">History <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="IO - Functional Examples" href="../../examples/io/index.html">IO</a></li><li class="item"><a title="ImageLoader - Functional Examples" href="../../examples/imageloader/index.html">ImageLoader</a></li><li class="item"><a title="Internationalization - Functional Examples" href="../../examples/intl/index.html">Internationalization</a></li><li class="item"><a title="JSON (JavaScript Object Notation) - Functional Examples" href="../../examples/json/index.html">JSON</a></li><li class="item"><a title="JSONP (JSON with Padding) - Functional Examples" href="../../examples/jsonp/index.html">JSONP <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Recordset - Functional Examples" href="../../examples/recordset/index.html">Recordset <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Resize - Functional Examples" href="../../examples/resize/index.html">Resize <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Sortable - Functional Examples" href="../../examples/sortable/index.html">Sortable <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Stylesheet - Functional Examples" href="../../examples/stylesheet/index.html">Stylesheet</a></li><li class="item"><a title="Transition - Functional Examples" href="../../examples/transition/index.html">Transition <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Uploader - Functional Examples" href="../../examples/uploader/index.html">Uploader <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="YQL Query - Functional Examples" href="../../examples/yql/index.html">YQL Query <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 Widgets - Examples</li><li class="item"><a title="AutoComplete - Functional Examples" href="../../examples/autocomplete/index.html">AutoComplete <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Charts - Functional Examples" href="../../examples/charts/index.html">Charts <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataTable - Functional Examples" href="../../examples/datatable/index.html">DataTable <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Dial - Functional Examples" href="../../examples/dial/index.html">Dial <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Editor - Functional Examples" href="../../examples/editor/index.html">Editor <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Overlay - Functional Examples" href="../../examples/overlay/index.html">Overlay <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="ScrollView - Functional Examples" href="../../examples/scrollview/index.html">ScrollView <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Slider - Functional Examples" href="../../examples/slider/index.html">Slider <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="TabView - Functional Examples" href="../../examples/tabview/index.html">TabView <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 Node Plugins - Examples</li><li class="item"><a title="FocusManager Node Plugin - Functional Examples" href="../../examples/node-focusmanager/index.html">FocusManager Node Plugin <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="MenuNav Node Plugin - Functional Examples" href="../../examples/node-menunav/index.html">MenuNav Node Plugin <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 CSS - Examples</li><li class="item"><a title="YUI Base - Functional Examples" href="../../examples/cssbase/index.html">CSS Base</a></li><li class="item"><a title="YUI Fonts - Functional Examples" href="../../examples/cssfonts/index.html">CSS Fonts</a></li><li class="item"><a title="YUI Grids - Functional Examples" href="../../examples/cssgrids/index.html">CSS Grids <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="YUI CSS Reset - Functional Examples" href="../../examples/cssreset/index.html">CSS Reset</a></li><li class="sect">YUI 3 Developer Tools - Examples</li><li class="item"><a title="Console - Functional Examples" href="../../examples/console/index.html">Console <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Console Filters Plugin- Functional Examples" href="../../examples/console-filters/index.html">Plugin.ConsoleFilters <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Profiler - Functional Examples" href="../../examples/profiler/index.html">Profiler</a></li><li class="item"><a title="Test - Functional Examples" href="../../examples/test/index.html">Test</a></li><li class="sect">Other Useful YUI 3 Resources</li><li class="item"><a title="Answers to Frequently Asked Questions about the YUI Library" href="http://developer.yahoo.com/yui/articles/faq/">YUI FAQ (external)</a></li><li class="item"><a title="Yahoo!'s philosophy of Graded Browser Support" href="http://developer.yahoo.com/yui/articles/gbs/">Graded Browser Support (external)</a></li><li class="item"><a title="Videos and podcasts from the YUI Team and from the Yahoo! frontend engineering community." href="http://developer.yahoo.com/yui/theater/">YUI Theater (external)</a></li></ul>
</div>
</div>
	</div><!--closes bd-->

	<div id="ft">
        <p class="first">Copyright &copy; 2011 Yahoo! Inc. All rights reserved.</p>
        <p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> - 
            <a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> - 
            <a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> - 
            <a href="http://careers.yahoo.com/">Job Openings</a></p>
	</div>
</div>
<script language="javascript"> 
var yuiConfig = { filter: 'raw' };
</script>
<script src="../../assets/syntax.js"></script>
<script src="../../assets/dpSyntaxHighlighter.js"></script>
<script language="javascript"> 
dp.SyntaxHighlighter.HighlightAll('code'); 
</script>
</body>
</html>
